<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script type="text/javascript" src="../../static/js/admin.js"></script>-->
    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script src="../../static/js/republic.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../../static/css/weadmin.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../static/css/app.css">
    <link rel="stylesheet" href="../../static/css/survey.css">
    <link rel="stylesheet" href="../../static/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/webuploader/webuploader.css">
    <style>
        .freeBtn {
            padding: 6px;
            border: 1px solid #666;
            border-radius: 4px;
            cursor: pointer;
        }

        .freeActive {
            border: 1px solid #009688;
            background: #009688;
            color: #fff;
        }


    </style>
</head>
<body>
<div>
</div>
<br>
<form enctype="multipart/form-data" method="post" class="layui-form" id="addForm" action="">
    <div class="layui-form-item it">
        <label class="layui-form-label" style=" width: 110px">音频名称</label>
        <div class="layui-input-block">
            <input type="text" id="name" name="name" required lay-verify="required" placeholder="请输入课程名称"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label" style=" width: 110px">音频简介</label>
        <div class="layui-input-block">
            <textarea name="briefIntroduction" id="briefIntroduction" placeholder="请输入内容"
                      class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label" style=" width: 110px">音频文件</label>

        <div class="layui-input-block">
            <audio src="" controls="controls" id="radioUrl"></audio>
            <input id="fileupload" type="file" name="myfile" accept="audio/mp3" multiple>

        </div>
        <img id="loading" src="../../static/images/loading.gif" style="margin-left: 110px;display: none;">
        <div style="margin-left:110px;color: red;font-size: 10px ">*仅支持mp3格式</div>


    </div>

    <div class="layui-form-item it">
        <label class="layui-form-label" style=" width: 110px">试听秒数</label>
        <div class="layui-input-block" style="line-height: 38px">
            <span class="freeBtn" id="freeBtn" onclick="changeFree(-1)">全部</span>
            <span class="freeBtn " id="customBtn" onclick="changeFree(1)">自定义</span>

            <input type="text" id="seconds" name="seconds" required lay-verify="required" placeholder="请输入课程名称"
                   autocomplete="off" class="layui-input" style="width: 200px;display: inline-block">
        </div>

    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 110px">音频封面</label>
        <div class="layui-input-block">
            <img height="85" id="courseI" width="85" src="../../static/images/frame.png"
                 onclick="selectImage('imageFile')">
            <input type="file" accept="image/*" name="imageFile" id="imageFile" onchange="preview(this,'courseI')"
                   style="display:none;">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label" style=" width: 110px">音频排序</label>
        <div class="layui-input-block">
            <input type="number" id="orderNum" name="orderNum" required lay-verify="required" placeholder="请输入课程名称"
                   autocomplete="off" class="layui-input">

        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" type="submit" lay-filter="formDemo">保存</button>
            <input class="layui-btn" type="button" name="Submit" onclick="javascript:history.back(-1);" value="返回">
            <!--<button class="layui-btn" lay-submit  lay-filter="formDemo"   id="saveUser" >保存2</button>-->

        </div>
    </div>

</form>


</body>
<script type="text/javascript" src="../../static/js/jquery.min.js"></script>

<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../../static/js/admin.js"></script>


<script>
    var showSave = false
    var oldRadioUrl;
    var newRadioUrl;
    var id;
    var courseId;
    var jsessionid= localStorage.getItem("jsessionid")

    $(function () {
        var queryParm = getQueryVariable("id");
        if (!queryParm) {
            courseId = getQueryVariable("courseId");
        } else {
            //编辑
            id = queryParm;
            $.ajax({
                type: "GET",
                url: serverUrl + '/KnowledgeCourseAction/getCourseList/' + queryParm+';jsessionid='+jsessionid,
                xhrFields: {
                    withCredentials: true
                },
                success: function (r) {
                    if (r.code == 0) {
                        showSave = true
                        $("#briefIntroduction").val(r.data.briefIntroduction);
                        $("#name").val(r.data.name);
                        $("#courseI").attr('src', r.data.imageUrl);
                        $("#seconds").val(r.data.seconds);
                        $("#orderNum").val(r.data.orderNum);
                        $("#radioUrl").attr('src', 'http://r.chaojirenmai.vip/' + r.data.radioUrl);
                        oldRadioUrl = r.data.radioUrl
                        changeFree(r.data.seconds)
                    } else {
                        layer.msg(r.msg);
                    }
                },
            });
        }
    });


    var fileupload = $("#fileupload")

    fileupload.on('change', function () {
        var fileNames = '';
        var formData = new FormData();
        formData.append("file", this.files[0]);
        $("#loading").css("display", "block");

        $.ajax({
            url: serverUrl + '/KnowledgeCourseAction/uploadRadioFile;jsessionid='+jsessionid,
            type: "POST",
            data: formData,
            contentType: false,//必须false才会自动加上正确的Content-Type
            processData: false,//必须false才会避开jQuery对 formdata 的默认处理
            xhrFields: {
                withCredentials: true
            },
            success: function (res) {
                console.log(res)

                $("#radioUrl").attr('src', 'http://r.chaojirenmai.vip/' +res.data);
                newRadioUrl = res.data
                showSave = true
                $("#loading").css("display", "none");

                layer.msg("上传成功");

            },
            error: function () {

            }
        });


    })


    function changeFree(data) {
        var freeBtn = document.getElementById('freeBtn')
        var customBtn = document.getElementById('customBtn')
        var seconds = document.getElementById('seconds')

        if (data > 0) {
            freeBtn.classList.remove('freeActive')
            customBtn.classList.add('freeActive')
            seconds.style.display = 'inline-block'
        } else {
            freeBtn.classList.add('freeActive')
            customBtn.classList.remove('freeActive')
            seconds.style.display = 'none'
            seconds.value = -1
        }

    }


    $('form').submit(function (event) {
        console.log(showSave)

        event.preventDefault();
        // var form = $(this);
        var formData = new FormData(this);
        if (newRadioUrl) {
            formData.append('radioUrl', newRadioUrl)

        } else {
            formData.append('radioUrl', oldRadioUrl)
        }
        if (id > 0) {
            formData.set("id", id);
        } else {
            formData.set("courseId", courseId);
        }
        if (showSave) {
            $.ajax({
                type: 'POST',
                url: serverUrl + '/KnowledgeCourseAction/saveCourseList;jsessionid='+jsessionid,
                data: formData,
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                xhrFields: {
                    withCredentials: true
                },
                processData: false
            }).success(function (res) {
                var json = eval("(" + res + ")");
                if (json.code == 0) {
                    if (json.code == 0) {
                        layer.open({
                            // title: r.msg
                            content: "保存成功"
                            , btn: [' 确定'],
                            btn1: function () {
                                self.location = document.referrer;
                            }

                        });

                    }
                }
            }).fail(function (jqXHR, textStatus, errorThrown) {
                layer.msg("请求失败");

            });
        } else {
            layer.msg("请完善信息后再提交")

        }

    });


</script>


</html>